<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			body { margin: 0; }
		</style>
		<script src="../utils/setTitle.js"></script>
	</head>
	<body>
		<script type="importmap">
			{
				"imports": {
					"three": "https://unpkg.com/three/build/three.module.js"
				}
			}
		</script>
		<script type="module">
			import * as THREE from 'three';
			const scene = new THREE.Scene();
			const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
			const geometry = new THREE.BufferGeometry();
			const vertices = new Float32Array( [
				-1.0, -1.0,  0.0,
				1.0, -1.0,  0.0,
				1.0,  1.0,  0.0,

				1.0,  1.0,  0.0,
				-1.0,  1.0,  0.0,
				-1.0, -1.0,  0.0
			] );

			//3个值代表一个顶点。
			geometry.setAttribute( 'position', new THREE.BufferAttribute( vertices, 3 ,true) );;
			const color = new Uint8Array( [
				155.0, 0.0,  1.0,
				0.0,  0.0,  0.0,
				0.0,  0.0,  0.0,

				155.0, 0.0,  1.0,
				0.0,  0.0,  0.0,
				0.0,  0.0,  0.0,
			] );
			geometry.setAttribute( 'color', new THREE.BufferAttribute( color, 3 ,true) );
			const material = new THREE.MeshBasicMaterial( { color: 0xff0000,
					vertexColors: true } );
			const mesh = new THREE.Mesh( geometry, material );//渲染出来的类型线，面点之类的和webgl设置的渲染类型差不多吧
			scene.add(mesh)
			camera.position.z = 2
			const renderer = new THREE.WebGLRenderer();
			renderer.setSize( window.innerWidth, window.innerHeight );
			document.body.appendChild( renderer.domElement );
			function animate() {
				requestAnimationFrame( animate );
				renderer.setSize( window.innerWidth, window.innerHeight );
				renderer.render( scene, camera );
			}
			animate();
		</script>
	</body>
</html>